<template>
  <div>
    <div v-for="(item, index) in audioList" :key="index">
      <audio :ref="`audio-${index}`" :src="item.path" controls @play="handlePlay(index)"></audio>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audioList: [
        {
          path: "https://v5-test.faqrobot.cn/oss/public/material/35/20240308/7906DB695A744D18942C2ECE584F08E9.wav",
        },
        {
          path: "https://v5-test.faqrobot.cn/oss/public/material/303/20240531/6F380D1DAB14461E8538921FA91AD71A.wav",
        },
        {
          path: "https://v5-test.faqrobot.cn/oss/public/material/35/20240221/51559DE10C5549698B462C4F4947D637.mov",
        },
        {
          path: "http://www.w3school.com.cn/i/horse.mp3",
        },
      ],
      currentPlayingIndex: null,
    };
  },
  methods: {
    handlePlay(index) {
      if (this.currentPlayingIndex !== null && this.currentPlayingIndex !== index) {
        const currentPlayingAudio = this.$refs[`audio-${this.currentPlayingIndex}`][0];
        if (currentPlayingAudio) {
          currentPlayingAudio.pause();
        }
      }
      this.currentPlayingIndex = index;
    },
  },
};
</script>